<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="本质是在HTTP协议的基础上以异步的方式与后端进行通信。
异步某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。
其优势在于不阻塞程序的执行，从而提升整体执行效率。
XMLHttpRequest可以以异步方式的处理程序。
XMLHttpReques">
    

    <!--Author-->
    
        <meta name="author" content="John Doe">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="AJAX(Asynchronous Javascript And XML)"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Hexo"/>

    <!--Type page-->
    
        <meta property="og:type" content="article" />
    

    <!--Page Cover-->
    

        <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>AJAX(Asynchronous Javascript And XML) - Hexo</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Google Analytics -->
    


    <!-- favicon -->
    
	
</head>


<body>

    <!-- Menu -->
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">逐风</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                
                    <li>
                        <a href="/">
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/archives">
                            
                                Archives
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/tags">
                            
                                Tags
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/categories">
                            
                                Categories
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="https://github.com/klugjo/hexo-theme-clean-blog">
                            
                                <i class="fa fa-github fa-stack-2x"></i>
                            
                        </a>
                    </li>
                
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

    <!-- Main Content -->
    <!-- Page Header -->
<!-- Set your background image for this header in your post front-matter: cover -->

<header class="intro-header" style="background-image: url('http://www.codeblocq.com/assets/projects/hexo-theme-clean-blog/img/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>AJAX(Asynchronous Javascript And XML)</h1>
                    
                    <span class="meta">
                        <!-- Date and Author -->
                        
                        
                            2017-02-10
                        
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Tags and categories -->
           

            <!-- Gallery -->
            

            <!-- Post Main Content -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <p>本质是在HTTP协议的基础上以异步的方式与后端进行通信。</p>
<h3 id="异步"><a href="#异步" class="headerlink" title="异步"></a>异步</h3><p>某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。</p>
<p>其优势在于不阻塞程序的执行，从而提升整体执行效率。</p>
<p>XMLHttpRequest可以以异步方式的处理程序。</p>
<h3 id="XMLHttpRequest"><a href="#XMLHttpRequest" class="headerlink" title="XMLHttpRequest"></a>XMLHttpRequest</h3><p>浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line">   /*js 内置的 http 请求对象  XMLHttpRequest*/</div><div class="line">    //post方式</div><div class="line">   /*1.怎么使用 这个内置对象*/</div><div class="line">   var xhr = new XMLHttpRequest;</div><div class="line"></div><div class="line">   /*请求行*/</div><div class="line">   xhr.open(&apos;post&apos;,&apos;1.php&apos;);</div><div class="line"></div><div class="line">   /*请求头*/</div><div class="line">   //post 必须设置 Content-Type: application/x-www-form-urlencoded</div><div class="line">   xhr.setRequestHeader(&apos;Content-Type&apos;,&apos;application/x-www-form-urlencoded&apos;);</div><div class="line"></div><div class="line">   /*3.发送请求*/</div><div class="line">   xhr.send(&quot;name=xjj&amp;age=10&quot;);</div><div class="line"></div><div class="line">//get方式</div><div class="line">  var xhr = new XMLHttpRequest;</div><div class="line"></div><div class="line">   /*请求行*/</div><div class="line">   xhr.open(&apos;get&apos;,&apos;1.php&amp;内容&apos;);</div><div class="line"></div><div class="line">   /*3.发送请求*/</div><div class="line">   xhr.send();</div></pre></td></tr></table></figure></p>
<h3 id="请求"><a href="#请求" class="headerlink" title="请求"></a>请求</h3><p>HTTP请求3个组成部分与XMLHttpRequest方法的对应关系</p>
<p>1、请求行</p>
<p>xhr.open(‘post’,’01.php’);<br>2、请求头</p>
<p>xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);<br>get请求可以不设置<br>3、请求主体</p>
<p>xhr.send(“name=xjj&amp;age=10”);<br>get可以传空<br>注意书写顺序</p>
<h3 id="响应"><a href="#响应" class="headerlink" title="响应"></a>响应</h3><p>HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。</p>
<p>HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。</p>
<p>由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">if(xhr.readyState == 4 &amp;&amp; xhr.status == 200)&#123;</div><div class="line">    console.log(&apos;ok&apos;);</div><div class="line">    console.log(xhr.responseText);</div><div class="line">    /*把内容渲染在页面当中*/</div><div class="line">    document.querySelector(&apos;#result&apos;).innerHTML = xhr.responseText;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>readyState<br>0：请求未初始化（还没有调用 open()）。<br>1：请求已经建立，但是还没有发送（还没有调用 send()）。<br>2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。<br>3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。<br>4：响应已完成；您可以获取并使用服务器的响应了。<br>onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态</p>
<p>1、获取状态行（包括状态码&amp;状态信息）</p>
<p>xhr.status 状态码</p>
<p>xhr.statusText 状态码信息<br>2、获取响应头</p>
<p>xhr.getResponseHeader(‘Content-Type’);<br>xhr.getAllResponseHeaders();<br>3、响应主体</p>
<p>xhr.responseText<br>xhr.responseXML<br>我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML</p>
<h3 id="API详解"><a href="#API详解" class="headerlink" title="API详解"></a>API详解</h3><p>xhr.open() 发起请求，可以是get、post方式<br>xhr.setRequestHeader() 设置请求头<br>xhr.send() 发送请求主体get方式使用xhr.send(null)<br>xhr.onreadystatechange = function () {} 监听响应状态<br>xhr.status表示响应码，如200<br>xhr.statusText表示响应信息，如OK<br>xhr.getAllResponseHeaders() 获取全部响应头信息<br>xhr.getResponseHeader(‘key’) 获取指定头信息<br>xhr.responseText、xhr.responseXML都表示响应主体</p>
<h3 id="GET和POST请求方式的差异（面试题）"><a href="#GET和POST请求方式的差异（面试题）" class="headerlink" title="GET和POST请求方式的差异（面试题）"></a>GET和POST请求方式的差异（面试题）</h3><p>1、GET没有请求主体，使用xhr.send(null)</p>
<p>2、GET可以通过在请求URL上添加请求参数</p>
<p>3、POST可以通过xhr.send(‘name=itcast&amp;age=10’)</p>
<p>4、POST需要设置</p>
<p>5、GET效率更好（应用多）</p>
<p>6、GET大小限制约4K，POST则没有限制</p>
<p>现在获取的是简单类型数据 如何获取复杂数据？</p>


                
            </div>

            <!-- Comments -->
            
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    


                </div>
            
        </div>
    </div>
</article>

    <!-- Footer -->
    <hr />

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    

                    

                    
                        <li>
                            <a href="https://github.com/klugjo/hexo-theme-clean-blog" target="_blank">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    

                    

                    

                    
                </ul>
                <p class="copyright text-muted">&copy; 2018 John Doe<br></p>
                <p class="copyright text-muted">Original Theme <a target="_blank" href="http://startbootstrap.com/template-overviews/clean-blog/">Clean Blog</a> from <a href="http://startbootstrap.com/" target="_blank">Start Bootstrap</a></p>
                <p class="copyright text-muted">Adapted for <a target="_blank" href="https://hexo.io/">Hexo</a> by <a href="http://www.codeblocq.com/" target="_blank">Jonathan Klughertz</a></p>
            </div>
        </div>
    </div>
</footer>


    <!-- After footer scripts -->
    
<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Bootstrap -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Disqus Comments -->



</body>

</html>